<template>
  <div class="common-body-wrapper">
    <search-header single-width="130" :isSingle="false" :searchList="searchList" @confirmSearch="toSearch" @handleChange="handleSearchChange" :isSetSingle="false"></search-header>

    <!--按钮-->
    <div class="operate-btn-group">
      <a class="ake_btn ake_btn_text" @click.prevent="reBuild()">重新生成</a>
    </div>

    <div class="charts-body">
      <div class="header-title">
        <h3>
          <!-- <span>2018年11月08日</span>
          <span class="middle">【瀚天科技城】</span>
          <span>车场周转率:&nbsp;18.8次</span> -->
          {{headerTitle}}
        </h3>
      </div>
      <div class="data-header">
        <ul class="summary-data-list">
          <li>
            <img src="../../assets/img/ic_total.png" alt="">
            <span class="num">{{topSummaryData.slotsNumber}}</span>
            <span>总车位数(个)</span>
          </li>
          <li>
            <img src="../../assets/img/ic_temporary.png" alt="">
            <span class="num">{{topSummaryData.tempCarports}}</span>
            <span>临时车位(个)</span>
          </li>
          <li>
            <img src="../../assets/img/ic_fixed.png" alt="">
            <span class="num">{{topSummaryData.fixedCarports}}</span>
            <span>固定车位(个)</span>
          </li>
          <!-- <li>
            <img src="../../assets/img/ic_rent.png" alt="">
            <span class="num">{{topSummaryData.leasedCarports}}</span>
            <span>租用车位(个)</span>
          </li>
          <li>
            <img src="../../assets/img/ic_free.png" alt="">
            <span class="num">{{topSummaryData.freeCarports}}</span>
            <span>免费车位(个)</span>
          </li>
          <li>
            <img src="../../assets/img/ic_reserve.png" alt="">
            <span class="num">{{topSummaryData.bookedCarports}}</span>
            <span>预定车位(个)</span>
          </li> -->
        </ul>
      </div>
      
      <div class="charts-wrap">
        <div class="charts-top">
          <!-- 剩余车位数-图表-标题 -->
          <p class="parking-space-title">
            <span>剩余车位数</span>
            <span>单位:&nbsp;(个)</span>
          </p>
          <!-- 车牌TOP10-表格-标题 -->
          <p class="plate-number-title">
            <span>
              <span class="carNo-tab" :class="{'active':carNoTopTab==1}" @click="carNoTopTab=1">车牌TOP10</span>
              <span class="carNo-tab" :class="{'active':carNoTopTab==2}" @click="carNoTopTab=2">车牌号码TOP10</span>
            </span>
            <span>单位:&nbsp;&nbsp;[次]</span>
          </p>
        </div>
        <!-- 剩余车位数-图表 -->
        <div class="chart-box">
          <div class="wraning" v-if="!isShowParkingSpaceChart">
            <i class="el-icon-warning"></i>图表数据为空
          </div>
          <div id="charts-parkingTime" class="charts-parkingTime"></div>
          <div class="parking-space-right">
            <table cellspacing="0" v-if="carNoTopTab==1">
              <tbody>
                <tr v-for="(item,index) in carCodeList" :key="index">
                  <td v-if="index==0">
                    <img src="../../assets/img/ic_gold medal.png" alt="">
                  </td>
                  <td v-else-if="index==1">
                    <img src="../../assets/img/ic_silver medal.png" alt="">
                  </td>
                  <td v-else-if="index==2">
                    <img src="../../assets/img/ic_bronze medal.png" alt="">
                  </td>  
                  <td v-else>NO.{{index+1}}</td>
                  <td>{{item.carCodeArea}}</td>
                  <td>{{item.count}}</td>
                </tr>
              </tbody>
            </table>
            <table cellspacing="0" v-if="carNoTopTab==2">
              <tbody>
                <tr v-for="(item,index) in carNoTopTenList" :key="index">
                  <td v-if="index==0">
                    <img src="../../assets/img/ic_gold medal.png" alt="">
                  </td>
                  <td v-else-if="index==1">
                    <img src="../../assets/img/ic_silver medal.png" alt="">
                  </td>
                  <td v-else-if="index==2">
                    <img src="../../assets/img/ic_bronze medal.png" alt="">
                  </td>  
                  <td v-else>NO.{{index+1}}</td>
                  <td>{{item.carCodeArea}}</td>
                  <td>{{item.count}}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <!-- 车流量分析-图表-标题 -->
        <div class="car-flow-title">
          <span>车流量分析</span>
          <div>
            <template>
              <el-select v-model="passagewaySelected" @change="choosePassageway">
                <el-option
                  v-for="item in passagewayList"
                  :key="item"
                  :value="item">
                </el-option>
              </el-select>
            </template>
            <span>单位:&nbsp;(次)</span>
          </div>
        </div>
        <!-- 车流量分析-图表 -->
        <div class="chart-box car-flow-wrap">
          <div class="wraning" v-if="!isShowParkingFlowChart">
            <i class="el-icon-warning"></i>图表数据为空
          </div>
          <div id="charts-flow" class="charts-flow"></div>
          <div class="charts-flow-right">
            <table cellspacing="0">
              <thead>
                <tr>
                  <th>车流量极值</th>
                  <th>单位:&nbsp;(辆)</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>累计进场车辆</td>
                  <td>{{enterTotalCount}}</td>
                </tr>
                <tr>
                  <td>累计离场车辆</td>
                  <td>{{leaveTotalCount}}</td>
                </tr>
                <tr>
                  <td>
                    <span>进场车辆高峰值</span>
                    <span class="time-range">{{enterMaxValueTimeSlot}}</span>
                  </td>
                  <td>{{enterMaxValue}}</td>
                </tr>
                <tr>
                  <td>
                    <span>离场车辆高峰值</span>
                    <span class="time-range">{{leaveMaxValueTimeSlot}}</span>
                  </td>
                  <td>{{leaveMaxValue}}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
         <!-- 停车时长分布-图表-标题 -->
        <p class="parking-time-title">
          <span>停车时长分布</span>
          <span>单位:&nbsp;(辆)</span>
        </p>
        <!-- 停车时长分布-图表 -->
        <div class="chart-box parking-time-wrap">
          <div class="wraning" v-if="!isShowParkingTimeChart">
            <i class="el-icon-warning"></i>图表数据为空
          </div>
          <div id="charts-parking-time" class="charts-parking-time"></div>
          <div class="charts-parking-time-right">
            <table cellspacing="0"> 
              <thead>
                <tr>
                  <th>停车时长极值</th>
                  <th>单位:&nbsp;(辆)</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>
                    <span>最多停车时长分布</span>
                    <span class="time-range">{{parkingDurationMaxValueTimeSlot}}</span>
                  </td>
                  <td>{{parkingDurationMaxValue}}</td>
                </tr>
                <tr>
                  <td>
                    <span>最少停车时长分布</span>
                    <span class="time-range">{{parkingDurationMinValueTimeSlot}}</span>
                  </td>
                  <td>{{parkingDurationMinValue}}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>
</template>

<script>
import common from "@mixins/common.js";
import stardardList from '@mixins/tables/stardardList.js'
import parking from "./js/parking.js";
export default {
  mixins: [common, stardardList, parking],
  data() {
    var today = new Date(moment().subtract('days', 1).format("YYYY-MM-DD"));
    return {
      carNoTopTab:0, //1:车牌top10; 2:车牌号码top10
      searchList: [
        {
          index: 0,
          isShow: false,
          type: "select",
          name: "reportDimension",
          text: "时间维度",
          value: "day",
          isHandleChange: true,
          options: [
            { name: "日报", value: "day" },
            { name: "月报", value: "month" },
          ]
        },
        {
          index: 1,
          isShow: false,
          type: "datePicker",
          name: "statDate",
          text: "时间",
          value: today,
          format: "yyyy-MM-dd",
          flag: 'date',
          pickerType: "date",
          isSingle: true,
          propName: "query_chargeDateStart,query_chargeDateEnd",
          style: { width: "200px" },
          pickerOptions: {
            disabledDate: this.disabledDate
          }
        },
        {
          index: 2,
          isShow: false,
          type: "select",
          name: "parkId",
          text: "停车场名称",
          value: "",
          options: []
        }
      ]
    };
  }
};
</script>

<style lang="less" scoped>
@greydd: #ddd;
@greyf8: #f8f8f8;
@green: #2bc6b8;
@blue: #169bd5;
.operate-btn-group{
  padding-left: 16px;
}
.common-body-wrapper {
  overflow: auto;
  display: flex;
  flex-direction: column;
  .search-wrapper {
    padding-top: 8px;
    display: flex;
    align-items: center;
  }
  .search-form {
    display: flex;
    padding: 8px 16px 0px;
    .form-group {
      display: flex;
      align-items: center;
      height: 30px;
      line-height: 30px;
      margin-bottom: 8px;
      .el-form-item__label {
        color: #333;
        padding-left: 12px;
        padding-right: 12px;
        background-color: @greyf8;
        font-size: 14px;
        border-radius: 4px 0px 0px 4px;
        border: 1px solid @greydd;
        border-right: 0px;
      }
      .el-form-item__content {
        border-radius: 0px 4px 4px 0px;
        border: 1px solid @greydd;
        .el-input__inner {
          border: 0;
          box-shadow: none;
          background-color: #fff;
        }
      }
      .el-cascader__label {
        line-height: 30px;
      }
    }
    .search-btn .el-icon-search {
      font-size: 20px;
      line-height: 1.6;
    }
  }

  .charts-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    .header-title{
      margin: 20px 0;
      text-align: center;
      .middle{
        margin: 0 10px;
      }
    }
    .data-header {
      padding: 10px 16px;
      .summary-data-list{
        display: flex;
        li{
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          .num{
            font-size: 26px;
            color: #2C5EB0;
            font-weight: bold;
          }
          img{
            width: 52px;
            height: 52px;
          }
        }
      }
    }
    .parking-space-title,
    .car-flow-title,
    .parking-time-title{
      display: flex;
      justify-content: space-between;
      width: 800px;
      height: 30px;
      padding: 0 75px 0 50px;
      span{
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        color: #272727;
      }
      span:first-child{
        font-weight: bold;
      }
    }
    .car-flow-title{
      margin-bottom: 10px;
      // border: 1px solid red;
    }
    .charts-wrap {
      margin-right: 30px;
      .charts-top{
        height: 35px;
        display: flex;
        .plate-number-title{
          padding-left: 20px;
          padding-right: 10px;
          line-height: 30px;
          flex: 1;
          display: flex;
          justify-content: space-between;
          > span:first-child{
            span{
              cursor: pointer;
              padding-bottom: 5px;
              &:first-child{
                margin-right:10px;
              }
              &.active{
                color: #2C5EB0;
                border-bottom: 2px solid #2C5EB0;
              }
            }
          }
          span{
            font-size: 14px;
            color: #272727;
            &.carNo-tab{
              font-weight: bold;
            }
          }
        }
      }
      .chart-box{
        margin: 0 auto;
        display: flex;
        position: relative;
        .wraning {
          position: absolute;
          top: 40%;
          left: 35%;
          transform: translateX(-70%);
          padding: 8px 20px;
          border-radius: 6px;
          background-color: #627b9f;
          font-size: 30px;
          color: #f3aa16;
          i {
            margin-right: 20px;
            color: #f3aa16;
          }
        }
      }
      .charts-parkingTime,
      .charts-flow,
      .charts-parking-time
      {
        width: 800px;
      }
      .parking-space-right,.charts-flow-right,.charts-parking-time-right{
        width: 360px;
        margin-left: 30px;
      }
      .charts-parkingTime {
        height: 440px;
      }
      .parking-space-right{
        height: 425px;
        border: 1px solid #C7C7C7;
        border-radius: 6px;
        table{
          width: 100%;
          height: 100%;
          tr td:first-child{
            width: 15%;
            text-align: center;
          }
          tr td:nth-child(2){
            padding-left: 15%;
          }
          tr td:last-child{
            width: 15%;
            text-align: center;
            font-weight: bold;
          }
          tr:nth-child(2n){
            background: #f3f2f2;
          }
        }
      }
      .charts-flow {
        height: 320px;
      }
      .charts-flow-right{
        height: 320px;
        border: 1px solid #C7C7C7;
        border-radius: 6px;
        table{
          width: 100%;
          height: 320px;
          thead{
            background: #F4F4F4;
            border-radius: 4px 4px 0 0;
            tr > th{
              height: 48px;
              border-bottom: 1px solid #DDDDDD;
            }
            tr th:first-child{
              text-align: left;
              padding-left:14px;
            }
            tr th:last-child{
              text-align: right;
              padding-right: 14px;
            }
          }
          tbody{
            tr td{
              height: 60px;
              line-height: 60px;
              border-bottom: 1px solid #DDDDDD;
              span{
                display: block;
                height: 20px;
                line-height: 20px;
                &.time-range{
                  color: #80a1e1;
                }
              }
            }
            tr td:first-child{
              text-align: left;
              padding-left: 14px;
            }
            tr td:last-child{
              text-align: right;
              padding-right: 14px;
              font-size: 20px;
              font-weight: bold;
            }
          }
        }
      }
      .charts-parking-time{
        height: 230px;
        background: #F4F4F4;
      }
      .charts-parking-time-right{
        height: 230px;
        table{
          width: 100%;
          border: 1px solid #DDDDDD;
          border-radius: 4px 4px 0 0;
          thead{
            background: #F4F4F4;
            border-radius: 4px 4px 0 0;
            tr th{
              height: 48px;
              border-bottom: 1px solid #DDDDDD;
              border-radius: 4px 4px 0 0;
              &:first-child{
                text-align: left;
                padding-left: 14px;
              }
              &:last-child{
                text-align: right;
                padding-right: 14px;
              }
            }
          }
          tbody{
            tr td{
              height: 85px;
              line-height: 85px;
              border-bottom: 1px solid #DDDDDD;
              &:first-child{
                text-align: left;
                padding-left: 14px;
              }
              &:last-child{
                text-align: right;
                padding-right: 14px;
                font-size: 20px;
                font-weight: bold;
              }
              span{
                display: block;
                height: 20px;
                line-height: 20px;
                &.time-range{
                  color: #80a1e1;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>

